<template>
  <div id="bottomRight">
      <div style="margin: 5px;">
        <span>近半月的访问量</span>
      </div>
      <div id='chart' style="width:800px;height:300px"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";
export default {
  data() {
    return {
      halfMoonDate: [],
      halfMoonVisits: []
    }
  },
  components: {
  },

  mounted() {
        setTimeout(() => {
          // this.getHalfMoonDate();
          // this.getHalfMoonVisits();
          this.getVisit();
        },1000)
    },

  methods: {
    getVisit() {
      axios.post('api/data/visit').then(res => {
        console.log(res)
        if (res.data.code == '200') {
          this.halfMoonVisits = res.data.data.halfMoonVisits
          this.halfMoonDate = res.data.data.halfMoonDate
        }
        this.getEchartData();
      }).catch(err => {
        console.log(err);
      })
    },
    getHalfMoonDate() {
      this.halfMoonDate = []
      var myDate=new Date();
      var nowDate=myDate.getDate()
      if(nowDate-15>=0){
        console.log('1111')
        //起始日期
        var beginDate= nowDate-15;
        for(var m=beginDate;m<nowDate;m++ ){
          this.halfMoonDate.push(myDate.getMonth()+1+'-'+m)
        }
        console.log(this.halfMoonDate,'halfMoonDate');
      }else {
        var val = 15 - nowDate;
        //确定上月的最大日期
        var beforeMonthMaxDate = new Date(myDate.getFullYear(), myDate.getMonth(), 0).getDate()
        //确定上月的开始日期;
        var beforeMonthBeginDate = beforeMonthMaxDate - val + 1;
        for (var n = beforeMonthBeginDate; n < beforeMonthMaxDate; n++) {
          this.halfMoonDate.push(myDate.getMonth() + '-' + n)
        }
        setTimeout(function(){
          for(var q=1;q<nowDate+1;q++ ){
            this.halfMoonDate.push(myDate.getMonth()+1+'-'+q)
          }
        }, 1000 )
        console.log(this.halfMoonDate,'halfMoonDate');
      }
    },
    getHalfMoonVisits() {
      this.halfMoonVisits = []
        if (this.halfMoonDate) {
          console.log('true')
          console.log('true',this.halfMoonDate.length)
          for (let i = 0; i < this.halfMoonDate.length; i++) {
            var num = Math.floor(Math.random() * 50 + 5)
            this.halfMoonVisits.push(num)
          }
        }
    },
    getEchartData() {
      var roseCharts = document.getElementById('chart');
      var myChart = echarts.init(roseCharts);

      //柱状图
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.halfMoonDate,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          splitLine: {
            "show": false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        }],
        series: [{
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: this.halfMoonVisits,
          // 配置颜色
          itemStyle: {
            normal: {
              color: function(params) {
                var colorList = ['#1be3db','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622','#1be3db','#1be3db','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                return colorList[params.dataIndex]
              }
            }
          }
        }]
      };
      myChart.setOption(option)
    }
  }
};
</script>

<style lang="scss" class>
$box-height: 350px;
$box-width: 100%;
#bottomRight {
  padding: 14px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  //下滑线动态
  .decoration2 {
    position: absolute;
    right: 0.125rem;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
</style>
